<template>
  <div class="login-nav">
    <div class="login-nav__left">
      <!-- <tab-button v-if="!isQrcode" :lineClass="{'login-nav__left__tabs': true}" :btns="[{title: '登陆', path: '/' }, {title: '注册', path: '/reg'}]"/> -->
    </div>
    <div class="login-nav__right">
      <icon-button v-if="!isQrcode" :lineClass="{'login-nav__right__min': true}" :title="`最小化`" :onClick="onMinimize"/>
      <icon-button :lineClass="{'login-nav__right__close': true}" :title="`关闭`" :onClick="onClose"/>
    </div>
  </div>
</template>

<script>
// import TabButton from '@/component/base/tab-button'
import IconButton from '@/component/base/icon-button'
import { ROUTE_LOGIN } from '@/common/const'
import { Login } from '@/common/'

export default {
  name: 'login-nav',
  props: [
  ],
  components: {
    // TabButton,
    IconButton
  },
  computed: {
    isQrcode () {
      return (this.$route.name === ROUTE_LOGIN.QRCODE)
    }
  },
  data () {
    return {

    }
  },
  mounted () {
  },
  methods: {
    onMinimize () {
      if (!this.useForStaticPage) {
        Login.impl().minimize()
      } else {
        (typeof window.Win !== 'undefined') && window.Win.minimize()
      }
    },
    onClose () {
      Login.impl().closeWindow()
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/lib/mixin";
@import "~@/css/common/variables";

.login-nav {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  &__left, &__right {
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-left: 15px;
  }
  &__left {
    &__tabs {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      height: 16px;
      justify-content: space-between;
      align-items: center;
      a {
        vertical-align: top;
        line-height: 16px;
        cursor: pointer;
        color:#ebebeb;
        font-size: 14px;
        margin-right: 15px;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        &:hover {
          color: #f29400;
          text-decoration: underline;
        }
      }
    }
  }
  &__right {
    width: 80px;
    height: 12px;
    justify-content: flex-end;
    &__min, &__close {
      display: block;
      width: 12px;
      height: 12px;
      cursor: pointer;
      overflow: hidden;
      margin-right: 15px;
    }
    &__min {
      background: url(~@/img/sprite.png) -1px -38px no-repeat;
      &:hover{
        background: url(~@/img/sprite.png) -17px -38px no-repeat;
      }
    }
    &__close {
      background: url(~@/img/sprite.png) -34px -38px no-repeat;
      &:hover{
        background: url(~@/img/sprite.png) -51px -38px no-repeat
      }
    }
  }
}
</style>
